<script setup>
import { ref } from 'vue';
import { listApi, deleteApi } from '@/api/sys/dept';
import { useRequest } from '@/hooks/pages-repeat';
import deptAddOrUpdata from './components/dept-add-or-updata.vue';

defineOptions({
  name: 'sys-dept'
})

const { 
  requestInit, 
  requestObj, 
  pagination,
  getDataList,
  addOrUpdata,
  deleteData,
  modalClose,
  addOrUpdataRef,
  dataFormModalShowHide
}  = useRequest()
requestInit({
  isTree: true,
  listApi,
  deleteApi
})

const columns = ref([
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '上级部门',
    dataIndex: 'parentName',
  },
  {
    width: 80,
    title: '排序',
    dataIndex: 'sort'
  },
  {
    width: 200,
    title: '操作',
    dataIndex: 'operate'
  }
])

</script>

<template>
  <div class="container">
    <a-row :gutter="20" wrap>
      <a-col :span="3">
        <a-space>
          <a-button v-authority="'sys:dept:save'" type="primary" @click="addOrUpdata()">新增</a-button>
        </a-space>
      </a-col>
    </a-row>

    <a-table 
      class="table-common"
      :columns="columns" 
      :data-source="requestObj.dataList" 
      rowKey="id" 
      bordered
      :pagination="requestObj.isPage ? pagination : false"
      :loading="requestObj.dataLoading"
      :scroll="{ y: 630 }"
      @change="getDataList"
      >
      <template #bodyCell="{ column, record }">

        <template v-if="column.dataIndex==='operate'">
          <a-button v-authority="'sys:dept:update'" type="text" @click="addOrUpdata(record.id)">修改</a-button>
          <a-popconfirm
            title="确定删除该条数据吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteData(record.id)"
          >
            <a-button v-authority="'sys:dept:delete'" type="text" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>

      <template #emptyText>
        <a-empty :description="requestObj.emptyText" />
      </template>
    </a-table>
    <deptAddOrUpdata @modalClose="modalClose" ref="addOrUpdataRef" v-if="dataFormModalShowHide" />
  </div>
</template>

<style lang="scss" scoped>

</style>